<template>
  <div id="sendOrder">
    <div class='breadcrumb-wrap'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>维修师</el-breadcrumb-item>
        <el-breadcrumb-item>派单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="condition-wrap">
      <el-form label-width="80px">
        <el-row :gutter="24">
          <el-col :span="18">
            <el-form-item label="手机号">
              <el-input v-model="queryVo.phoneNo" placeholder="请输入" icon="edit"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="handleseach">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class='option-wrap'>
      <el-row>
        <el-col :span="20">
          <el-button type="text" @click="conditionBtnClick('U')">未派单</el-button>
          <el-button type="text" @click="conditionBtnClick('02')">已派单</el-button>
          <el-button type="text" @click="conditionBtnClick('03')">已出发</el-button>
          <el-button type="text" @click="conditionBtnClick('04')">维修中</el-button>
          <el-button type="text" @click="conditionBtnClick('05')">待支付</el-button>
          <el-button type="text" @click="conditionBtnClick('06')">已完成</el-button>
          <el-button type="text" @click="conditionBtnClick('all')">全部订单</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="dialogVisible.addOrderVisible = true"><i class="el-icon-plus"> </i> 新增订单
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="gird-wrap">
      <el-table style="width: 100%" height="700" :border="true" :stripe="true" :data="dataList">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop='No' label="订单号" width="100" sortable></el-table-column>
        <el-table-column prop='customerName' label="姓名" width="80" sortable></el-table-column>
        <el-table-column prop='phoneNo' label="手机号" width="130" sortable></el-table-column>
        <el-table-column prop='modelName' label="机型" width="130" sortable></el-table-column>
        <el-table-column prop='flatName' label="故障" width="200" :show-overflow-tooltip="true" sortable>
        </el-table-column>
        <el-table-column prop="actualPrice" label="实收" sortable> </el-table-column>
        <el-table-column label="服务方式" prop="serviceTypeName" width="120" sortable></el-table-column>
        <el-table-column prop="engineerName" label="工程师" width="100" sortable></el-table-column>
        <el-table-column prop="adminStatusName" width="100" label="状态" sortable></el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template scope="scope">
            <el-button v-if="scope.row.adminStatusNo === 'U'" type="text" @click="sendOrder(scope.row,'02','派单')">派单
            </el-button>
            <el-button v-if="scope.row.adminStatusNo === '02'" type="text"
              @click="updateOrderToYCF(scope.row,'03','已出发')">已出发
            </el-button>
            <el-button v-if="scope.row.adminStatusNo === '03'" type="text"
              @click="updateOrderToWXZ(scope.row,'04','维修中')">维修中
            </el-button>
            <el-button v-if="scope.row.adminStatusNo === '04'" type="text"
              @click="updateOrderToWXCG(scope.row,'05','维修成功')">维修成功
            </el-button>
            <el-button v-if="scope.row.adminStatusNo === '05'" type="text"
              @click="updateOrderToYZF(scope.row,'06','已支付')">已支付
            </el-button>
            <el-button
              v-if="(scope.row.adminStatusNo === '03' || scope.row.adminStatusNo === '04' || scope.row.adminStatusNo === '05')"
              type="text" @click="sendOrderToGGCS(scope.row)">改派</el-button>
            <el-button type="text" v-if="scope.row.adminStatusNo === '12'" @click="customerOrderservice(scope.row)">售后
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="dialogVisible.detailDialogVisible" title="订单详情" top="2%" size="large">
      <order-detail :editInfo="editInfo" :modellist="modellist" :dataProvider="selectedObject.selectedRow"
        @saveup="updateOrder" @canle="canleOrder" @cancelreason="cancelRea"></order-detail>
    </el-dialog>

    <el-dialog v-model="dialogVisible.orderToYZFDialog" title="修改状态至支付完成" size="small">
      <span>请选择支付方式：</span>
      <el-select placeholder="请选择支付方式" v-model="paymentMethod">
        <el-option v-for="item in paymentMethodList" :label="item.payment_name" :value="item.id" :key="item.No">
        </el-option>
      </el-select>
      <br /><br />
      <span>请确认客户已完成支付后修改此状态</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.orderToYZFDialog = false">取 消</el-button>
        <el-button type="primary" @click="handleOrderToYZFClick">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog v-model="dialogVisible.updateDialog.visible" :title="dialogVisible.updateDialog.title" size="small">
      <span>{{dialogVisible.updateDialog.tips}}</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.updateDialog.visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible.updateDialog.action">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="派单" v-model="dialogVisible.sendOrderVisible" size="tiny">
      <table>
        <tr>
          <td class='form-label'>工程师：</td>
          <td class='form-label'>
            <el-select v-model="selectedEngineer" placeholder="请选择" :clearable="true">
              <el-option v-for="item in conditionProvider.enginners" :label="item.name" :value="item.No" :key="item.No">
              </el-option>
            </el-select>
          </td>
        </tr>
      </table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.sendOrderVisible = false">取 消</el-button>
        <el-button type="primary" @click="deliverOrder">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="取消订单" v-model="dialogVisible.cancelOrderDialog" size="tiny">
      取消原因:
      <el-select v-model="selectedObject.selectedReason">
        <el-option v-for="item in cancelReasons" :label="item.REASON" :value="item.CODE" :key="item.No"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible.cancelOrderDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmCancelOrder">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="新增订单" v-model="dialogVisible.addOrderVisible" size="large" :before-close="beforeClose">
      <add-order :editInfo="editInfo" :selected="selected" :faltArray="faltArray" @save="createOneOrder"
        @canleadd="canleadd"></add-order>
    </el-dialog>

    <el-dialog v-model="dialogVisible.serviceOrderVisible" title="返修" size="small">
      <c-service :dataOrder="choiceRow" @saveser="serviceOrder" @canleser="canleService"></c-service>
    </el-dialog>
  </div>
</template>

<script>
  import r from '../utils/RequestUtil';
  import AddOrder from './order/AddOrder';
  import OrderDetail from './order/OrderEditDetail';
  import CService from './order/CustomerService';
  import wxs from '../utils/WxsService'
  export default {
    name: "sendOrder",
    components: {
      OrderDetail,
      AddOrder,
      CService
    },
    data: function () {
      return {
        selectedObject: {
          selectedDate: [],
          selectedEnginner: null,
          orderIdentifier: null,
          selectedCity: [],
          selectedFalt: [],
          selectedDevice: [],
          selectedRow: null,
          selectedReason: null
        },
        selectedEngineer: null,
        dialogVisible: {
          addOrderVisible: false,
          detailDialogVisible: false,
          sendOrderDialogVisible: false,
          sendOrderVisible: false,
          cancelOrderDialog: false,
          serviceOrderVisible: false,
          orderToYZFDialog: false,
          updateDialog: {
            visible: false,
            title: '',
            tips: '',
            action: () => {}
          }
        },
        queryVo: {
          orderNo: null,
          pageSize: 10,
          pageNo: 1,
          engineerId: null,
          phoneNo: null,
          serviceType: null,
          customerName: null,
          fuzzyQuery: null,
          yyBeginTime: null,
          createTime: null,
          orderIdentifier: null,
          time: [],
          beginTime: null,
          endTime: null,
        },
        dataList: [],
        props: {
          addressProps: {
            value: "provinceName",
            label: "provinceName",
            children: "children"
          },
          failProps: {
            value: "value",
            label: "label",
            children: "children"
          },
          deviceProps: {
            value: "name",
            label: "name",
            children: "children"
          }
        },
        conditionProvider: {
          falts: [],
          enginnerlist: [],
          enginners: [],
          devicies: []
        },
        cancelReasons: [],
        cancelOrderNo: null,
        selecturl: null,
        totalcount: 0,
        brandinfos: [],
        subFailure: [],
        engineerinfolist: [],
        maintypeAndsubtype: [],
        orderIdentifierList: [],
        orderengStatus: null,
        editInfo: {
          customerName: null,
          phoneNo: null,
          address: null,
          orderIdentifier: null,
          price: null,
          solution: null,
          serviceType: null,
          date: null,
          startTime: null,
          endTime: null,
          remark: null,
          actualPrice: null,
          serviceRemark: null,
          wxsRemark: null
        },
        selected: {
          selectedCity: [],
          selectedDevice: [],
          selectedMainCenter: null,
          selectedShopInfo: null
        },
        faltArray: [{
          detid: 0
        }],
        choiceRow: null,
        editInfo: {
          dated: null,
          startTime: null,
          endTime: null,
          canlereason: null,
          serviceRemark: null,
          wxsRemark: null,
          customerName: null,
          phoneNo: null,
          address: null
        },
        modellist: {
          faltArr: [],
          citys: [],
          brands: [],
          shopName: null,
          centerName: null,
          serviceType: null
        },
        paymentMethodList: [],
        paymentMethod: null,
        orderToYZFDOrderNo: null
      }
    },
    methods: {
      beforeModel() {
        this.returnModelNull();
        this.dialogVisible.modifyOrderVisible = false;
      },
      returnModelNull() {
        this.editInfo.dated = null;
        this.editInfo.startTime = null;
        this.editInfo.endTime = null;
        this.editInfo.canlereason = null;
        this.editInfo.serviceRemark = null;
        this.editInfo.wxsRemark = null;
        this.editInfo.customerName = null;
        this.editInfo.phoneNo = null;
        this.editInfo.address = null;

        this.modellist.faltArr = [];
        this.modellist.citys = [];
        this.modellist.brands = [];
        this.modellist.shopName = null;
        this.modellist.centerName = null;
        this.modellist.serviceType = null;

        this.engineerinfolist = new Array();
      },
      beforeClose() {
        this.returnNull();
        this.dialogVisible.addOrderVisible = false;
      },
      returnNull() {
        this.editInfo.customerName = null;
        this.editInfo.phoneNo = null;
        this.editInfo.address = null;
        this.editInfo.orderIdentifier = null;
        this.editInfo.price = null;
        this.editInfo.solution = null;
        this.editInfo.serviceType = null;
        this.editInfo.date = null;
        this.editInfo.startTime = null;
        this.editInfo.endTime = null;
        this.editInfo.remark = null;
        this.editInfo.serviceRemark = null;
        this.editInfo.wxsRemark = null;
        this.editInfo.actualPrice = null;

        this.selected.selectedCity = [];
        this.selected.selectedDevice = [];
        this.selected.selectedMainCenter = null;
        this.selected.selectedShopInfo = null;
        this.faltArray = [{}];
      },
      updateOrder: function (params) {
        this.dialogVisible.detailDialogVisible = false;
        this.returnModelNull();
        this.queryOrder();
      },
      canleOrder() {
        this.dialogVisible.detailDialogVisible = false;
        this.returnModelNull();
      },
      canleadd() {
        this.dialogVisible.addOrderVisible = false;
        this.returnNull();
      },
      createOneOrder: function (data) {
        this.dialogVisible.addOrderVisible = false;
        this.queryOrder();
        this.returnNull();
      },
      confirmCancelOrder: function () {
        this.dialogVisible.cancelOrderDialog = false;
        this.selectedObject.selectedReason
      },
      cancelRea(cancelOrderNo, canlereason) {
        this.dialogVisible.detailDialogVisible = false;
      },
      sendOrder: function (row) {
        this.selectedObject.selectedRow = row;
        this.dialogVisible.sendOrderVisible = true;
        this.orderengStatus = "sendorder";
      },
      sendOrderToGGCS(row) {
        this.selectedObject.selectedRow = row;
        this.dialogVisible.sendOrderVisible = true;
        this.orderengStatus = "orderGGCS";
      },
      customerOrderservice(row) {
        this.choiceRow = row;
        this.dialogVisible.serviceOrderVisible = true;
      },
      canleService() {
        this.dialogVisible.serviceOrderVisible = false;
      },
      serviceOrder(data) {
        this.dialogVisible.serviceOrderVisible = false;
      },
      //选择维修师
      deliverOrder: function () {
        if (this.selectedEngineer === null) {
          r.message("请选择工程师", "warning");
          return;
        } else {

          let model = this.selectedObject.selectedRow;
          let n;
          this.conditionProvider.enginners.map((item) => {
            if (item.No === this.selectedEngineer) {
              return n = item;
            }
          })
          model.engineerName = n.name;
          model.engineerId = n.No;
          model.adminStatusNo = '03';
          model.adminStatusName = '已出发';
          wxs.EditOneOrderInfo(model, model.No);
          this.dialogVisible.updateDialog.visible = false;
          this.queryOrder();
        }
        this.dialogVisible.sendOrderVisible = false;
      },
      emptymodel() {
        this.queryVo.subFailure = this.comSubFailure;
        this.queryVo.brandName = this.comBrandName;
        this.queryVo.modelName = this.comModelName;
        if (this.queryVo.orderNo === "" || typeof this.queryVo.orderNo === "undefined") {
          this.queryVo.orderNo = null;
        }
        if (this.queryVo.phoneNo === "" || typeof this.queryVo.phoneNo === "undefined") {
          this.queryVo.phoneNo = null;
        }
        if (this.queryVo.time !== "" || typeof this.queryVo.beginTime !== "undefined" || this.queryVo.time !== null) {
          this.queryVo.beginTime = this.queryVo.time[0];
          this.queryVo.endTime = this.queryVo.time[1];
        }
        if (this.queryVo.serviceType === "" || typeof this.queryVo.serviceType === "undefined") {
          this.queryVo.serviceType = null;
        }
        if (this.queryVo.fuzzyQuery === "" || typeof this.queryVo.fuzzyQuery === "undefined") {
          this.queryVo.fuzzyQuery = null;
        }
        if (this.queryVo.yyBeginTime === "" || typeof this.queryVo.yyBeginTime === "undefined") {
          this.queryVo.yyBeginTime = null;
        }
        if (this.queryVo.createTime === "" || typeof this.queryVo.createTime === "undefined") {
          this.queryVo.createTime = null;
        }
        if (this.queryVo.orderIdentifier === "" || typeof this.queryVo.orderIdentifier === "undefined") {
          this.queryVo.orderIdentifier = null;
        }
        if (this.queryVo.engineerId === "" || typeof this.queryVo.engineerId === "undefined") {
          this.queryVo.engineerId = null;
        }
      },
      queryOrder: function () {
        this.emptymodel();
        this.dataList = wxs.getAllOrderList();
      },
      handleseach: function () {
        this.emptymodel();
        if (this.queryVo.phoneNo == null || this.queryVo.phoneNo == '') {
          this.queryOrder();
        } else {
          this.dataList = wxs.getOnOrderDetail([{
            phoneNo: this.queryVo.phoneNo
          }]);
        }
      },
      conditionBtnClick: function (url) {
        this.selecturl = url;
        this.emptymodel();
        if (url === 'all') {
          this.queryOrder();
        } else {
          this.dataList = wxs.getOnOrderDetail([{
            adminStatusNo: url
          }]);
        }
      },
      sizeChange: function (size) {
        this.queryVo.pageSize = size;
        this.queryOrder();
      },
      handleCurrentChange(curren) {
        this.queryVo.pageNo = curren;
        this.queryOrder();
      },
      formatterDevice: function (row, column) {
        return row.brandName + " " + row.modelName + " " + row.deviceColor;
      },
      formatterFalt: function (row, column) {
        let orderFailures = row.orderFailures;
        let str = "";
        for (let i = 0; i < orderFailures.length; i++) {
          str += orderFailures[i].failureSubName + ";";
        }
        return str;
      },
      queryEnginner: function () {
        this.conditionProvider.enginners = wxs.getAllEngieer();
      },
      showDetail: function (row) {
        this.selectedObject.selectedRow = row;
        this.dialogVisible.detailDialogVisible = true;
      },
      updateOrderToYCF: function (row, No, status) {
        let action = () => {
          let model = row;
          model.adminStatusNo = No;
          model.adminStatusName = status;
          wxs.EditOneOrderInfo(model, model.No);
          this.dialogVisible.updateDialog.visible = false;
          this.closeUpdateDialog();
          this.queryOrder();
        }
        this.openUpdateDialog('修改状态至已出发', '确认修改状态至已出发？', action);
      },
      updateOrderToWXZ: function (row, No, status) {
        let action = () => {
          let model = row;
          model.adminStatusNo = No;
          model.adminStatusName = status;
          wxs.EditOneOrderInfo(model, model.No);
          this.dialogVisible.updateDialog.visible = false;
          this.closeUpdateDialog();
          this.queryOrder();
          // });
        }
        this.openUpdateDialog('修改状态至维修中', '确认修改至维修中状态？', action);
      },
      updateOrderToComplete: function (row) {
        let action = () => {

        }
        this.closeUpdateDialog();
        this.queryOrder();
        this.openUpdateDialog('修改状态至完成', '确认修改至已完成状态？', action);
      },
      updateOrderToYZF: function (row, No, status) {
        this.orderToYZFDOrderNo = row.orderNo;
        this.dialogVisible.orderToYZFDialog = true;

        let action = () => {
          let model = row;
          model.adminStatusNo = No;
          model.adminStatusName = status;
          wxs.EditOneOrderInfo(model, model.No);
          this.closeUpdateDialog();
          this.queryOrder();
        }
        this.openUpdateDialog('修改状态至支付完成', '请确认客户已完成支付后修改此状态！', action);
      },
      handleOrderToYZFClick() {
        if (this.paymentMethod == null) {
          r.message("请选择客户支付方式", "error");
        } else {}
      },
      updateOrderToWXCG: function (row, No, status) {
        let action = () => {
          let model = row;
          model.adminStatusNo = No;
          model.adminStatusName = status;
          wxs.EditOneOrderInfo(model, model.No);
          this.closeUpdateDialog();
          this.queryOrder();
        }
        this.openUpdateDialog('修改状态至维修成功', '确认修改至维修成功状态！', action);
      },

      openUpdateDialog: function (title, tips, action) {
        this.dialogVisible.updateDialog.title = title;
        this.dialogVisible.updateDialog.tips = tips;
        this.dialogVisible.updateDialog.action = action;
        this.dialogVisible.updateDialog.visible = true;
      },
      closeUpdateDialog: function () {
        this.dialogVisible.updateDialog.title = '';
        this.dialogVisible.updateDialog.tips = '';
        this.dialogVisible.updateDialog.action = () => {};
        this.dialogVisible.updateDialog.visible = false;
      }
    },
    computed: {
      comSubFailure: function () {
        return this.subFailure[1];
      },
      comBrandName: function () {
        return this.brandinfos[1];
      },
      comModelName: function () {
        return this.brandinfos[2];
      }
    },
    mounted: function () {
      this.queryEnginner();
      this.queryOrder();
    }
  }

</script>

<style scoped="scoped">
  .el-select,
  .el-cascader {
    width: 100%;
  }

  .condition-wrap {
    padding-right: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
  }

  .label {
    font-size: 14px;
    width: 60px;
    padding: 0 8px;
    text-align: right;
  }

  .item-wrap {
    display: flex;
    align-items: center;
    padding: 10px;
  }

  .option-item {
    padding: 0 5px;
  }

</style>
